<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="admin/layout/include::head('目录编辑','/assets/module/dtree/dtree.css,/assets/module/dtree/font/dtreefont.css')"></head>
<style>

    .formBtn {
        background: #FBFBFB !important;
        border: 1px solid #e6e6e6 !important;
        color: #333 !important;
    }

    .formBtn:hover {
        color: #333 !important;
    }
</style>
<body style="padding-left: 20px;">
<form id="data-form" lay-filter="data-form" class="layui-form model-form">
    <div class="layui-card">
        <div class="layui-card-header" style="border-bottom-color:#1E9FFF;">
            <em>基本信息</em>
        </div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md6">
                    <input name="catalogId" type="hidden"/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">栏目名称</label>
                        <div class="layui-input-block">
                            <input name="catalogName" placeholder="请输入菜单名" type="text" class="layui-input" maxlength="20"
                                   lay-verify="required" required/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">栏目图片</label>
                        <div class="layui-input-block">
                            <input id="catalogImage" name="catalogImage" placeholder="栏目图片" type="text" class="layui-input"
                                   />
                                <button id="btnSel" type="button" class="layui-btn formBtn" style="position: absolute;right: 0;top:0;">选择
                                </button>
                                <button id="btnV" type="button" class="layui-btn formBtn" style="position: absolute;top: 0;right: 65px;">查看
                                </button>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">栏目类型</label>
                        <div class="layui-input-block">
                            <select name="catalogType" lay-verify="required">
                                <option value=""></option>
                                <option value="1">普通栏目</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">父级菜单</label>
                        <div class="layui-input-block">
                            <!--<input id="parentId" name="parentId" placeholder="父级菜单" type="text" class="layui-input"
                            lay-filter="tree"/>-->
                            <ul id="parentId" name="parentId" class="dtree" data-id="0"></ul>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" id="state" name="state" lay-skin="switch" value="0" checked lay-text="正常|禁用">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否首页展示</label>
                        <div class="layui-input-block">
                            <input type="checkbox" id="indexShow" name="indexShow" lay-skin="switch" value="1" checked lay-text="展示|隐藏">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-item text-left">
                            <button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
                            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">样式配置</label>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="catalogStyle" value="#000" placeholder="请选择颜色" class="layui-input" id="catalogStyle">
                        </div>
                        <div class="layui-input-inline" style="left: -11px;">
                            <div id="colorpicker"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input name="orderNo" placeholder="排序" type="number" class="layui-input"
                                   lay-verify="number"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">栏目描述</label>
                        <div class="layui-input-block">
                            <textarea name="catalogDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>


                </div>
            </div>


        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header" style="border-bottom-color:#1E9FFF;">
            <em>SEO信息</em>
        </div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO标题</label>
                        <div class="layui-input-block">
                            <input name="seoTitle" placeholder="" type="text" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SEO关键词</label>
                        <div class="layui-input-block">
                            <input name="seoKeywords" placeholder="" type="text" class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">SEO描述</label>
                        <div class="layui-input-block">
                            <textarea name="seoDescription" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</form>

<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>

<script>
    layui.use(['layer', 'admin','table', 'form','colorpicker','dtree'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var colorpicker = layui.colorpicker;
        var dtree = layui.dtree;
        colorpicker.render({
            elem:'#colorpicker', //绑定元素
            color:'#000',
            done:function (color) {
                $('#catalogStyle').val(color);
            }
        });

        // 表单选择
        $('#btnSel').click(function () {

           layer.open({
                type: 2,
                title: '选择文件',
                content: 'http://javabb.cn:8082/fileChoose.html?accept=image&uploadType=catalog',
                area: ['600px', '420px'],
                offset: '50px',
                shade: .1,
                fixed: false,
                resize: false,
                success: function(layero, index){
                    window.addEventListener('message',function(e){
                        if (typeof(e.data.mFsUrls) != "undefined" && e.data.mFsUrls.length > 0) {
                                $('#catalogImage').val(e.data.mFsUrls[0]);
                        }else{
                            B.error("发生错误");
                        }
                        layer.close(index);
                    },false);
                }
            });
        });
        // 查看
        $('#btnV').click(function () {
            var url = $('#catalogImage').val();
            if (!url) {
                layer.msg('请先选择', {icon: 2});
            } else {
                layer.photos({
                    photos: {data: [{src: url}]}, anim: 5, shade: .1, closeBtn: 2
                });
            }
        });
        // 回显数据
        var catalog = admin.getTempData('t_catalog');
        var response = {
            statusName: "success", //返回标识（必填）
            statusCode: true, //返回码（必填）
            message: "msg", //返回信息（必填）
            rootName: "data", //根节点名称（必填）
            treeId: "id", //节点ID（必填）
            parentId: "parentId", //父节点ID（必填）
            title: "text", //节点名称（必填）
        };
        var catalogParentTree = dtree.renderSelect({
            elem: "#parentId",
            url: "/admin/catalog/treeSelect",
            method: 'GET',
            dataStyle: "layuiStyle",
            skin: "zdy",
            response:response,
            done: function(){
                if(catalog){
                    dtree.dataInit("parentId", catalog.parentId);
                    dtree.setSelectValue("parentId");
                    //treeSelect.checkNode('tree', catalog.parentId);
                }
                //dtree.dataInit("selTree3", "001003");
                //dtree.setSelectValue("selTree3"); // 也可以在这里指定，第二个参数如果不填，则会自动读取
            }
        });
        if (catalog) {
            form.val('data-form',catalog);
            colorpicker.render({elem:'#colorpicker',color:catalog.catalogStyle,done:function (color) {
                    $('#catalogStyle').val(color);
                }});
            console.info(catalog);
            $('#state').prop('checked',catalog.state==0?"checked":"");
            $('#indexShow').prop('checked',catalog.indexShow==1?"checked":"");
            form.render();
        }

        // 表单提交事件
        form.on('submit(formSubmit)', function (data) {
            data.field.state = data.field.state==0?'0':'1';
            data.field.indexShow = data.field.indexShow==1?'1':'0';
            data.field.parentId = dtree.getNowParam(catalogParentTree).nodeId;
            //data.field.parentId = data.field.parentId==null?'0':data.field.parentId;
            // 表单提交事件
            B.post({
                url: '/admin/catalog/',
                loading: true,
                data: data.field,
                success: function (data) {
                    if (data.success) {
                        top.layer.msg(data.msg, {icon: 1});
                        admin.putTempData('formOk', true);  // 操作成功刷新表格
                        // 关闭当前iframe弹出层
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    } else {
                        top.layer.msg(data.msg, {icon: 2});
                    }
                }
            });
            return false;
        });

    });
</script>

</body>